import React, { memo } from 'react';
import { connect } from 'react-redux';
import './Shopping.css'
import * as actionTypes from "./store/actionCreators"

const Shopping = (props) => {
    // console.log(props, '----');
    const { goods, changeSelect, allSelect, deleteGoods, addcount, subcount, setDeleteState, isDeleteState, isAllSelect } = props
    //选中总价
    const totalPrice = () => {
        let sum = 0;
        goods.map((item) => {
            if (item.isSelect) {
                sum = sum + item.price * item.count
            }
        })
        return sum.toFixed(2)  //精确两位小数
    }
    return (
        <>
            {/* 管理栏 */}
            <div className="manage">
                <div className="delete" onClick={setDeleteState} style={isDeleteState ? { display: "none" } : {}}>管理</div>
                <div className="delete" onClick={setDeleteState} style={isDeleteState ? {} : { display: "none" }}>完成</div>
            </div>

            {/* 商品列 */}
            <div className="goods">
                {
                    goods.map((item, index) =>
                        // {
                        //     console.log(item,index,'---=============');
                        // }
                        <div key={item.id}>
                            <div className="goods-context">
                                {/* 是否勾选 */}
                                <div className='svg' onClick={changeSelect.bind(null, index)}>
                                    <div style={item.isSelect ? {} : { display: 'none' }}>
                                        <svg t="1642789229494" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12167" width="20" height="20"><path d="M512 65.983389c-245.919634 0-446.016611 200.095256-446.016611 446.016611 0 245.952318 200.064292 446.016611 446.016611 446.016611S958.016611 757.952318 958.016611 512C958.016611 266.080366 757.952318 65.983389 512 65.983389zM727.231286 438.432254 471.00766 697.439161c-0.063647 0.063647-0.192662 0.096331-0.25631 0.192662-0.096331 0.063647-0.096331 0.192662-0.192662 0.25631-2.048757 1.983389-4.575729 3.19957-6.944443 4.544765-1.183497 0.672598-2.143368 1.696116-3.392232 2.176052-3.839484 1.536138-7.904314 2.33603-11.967424 2.33603-4.095794 0-8.224271-0.799892-12.096439-2.399677-1.279828-0.543583-2.303346-1.632469-3.519527-2.303346-2.368714-1.343475-4.832039-2.528692-6.880796-4.544765-0.063647-0.063647-0.096331-0.192662-0.159978-0.25631-0.063647-0.096331-0.192662-0.096331-0.25631-0.192662l-126.016611-129.503454c-12.320065-12.672705-12.032791-32.928047 0.639914-45.248112 12.672705-12.287381 32.895364-12.063755 45.248112 0.639914l103.26354 106.112189 233.279613-235.839269c12.416396-12.576374 32.704421-12.703669 45.248112-0.25631C739.520387 405.600538 739.647682 425.85588 727.231286 438.432254z" p-id="12168" fill="#ff5500"></path></svg>
                                    </div>
                                    <div style={item.isSelect ? { display: 'none' } : {}}>
                                        <svg t="1642750103398" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7289" width="20" height="20"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128c-211.744443 0-384 172.255557-384 384s172.255557 384 384 384 384-172.255557 384-384S723.744443 128 512 128z" p-id="7290" fill="#d4d4d4"></path></svg>
                                    </div>

                                </div>
                                <div className="image">
                                    <img src={item.image} alt="" />
                                </div>
                                <p className="title">{item.title}</p>
                                <div className="price">￥{item.price}</div>
                                <div className="add-sub-button">
                                    <div className="sub" style={item.count == 1 ? {} : { display: "none" }}>
                                        <svg t="1642775728624" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8186" data-spm-anchor-id="a313x.7781069.0.i8" width="20" height="20"><path d="M768 554.666667H256c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z" p-id="8187" fill="#d4d4d4"></path></svg>
                                    </div>
                                    <div className="sub" onClick={subcount.bind(null, index)} style={item.count == 1 ? { display: "none" } : {}}>
                                        <svg t="1642775728624" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8186" data-spm-anchor-id="a313x.7781069.0.i8" width="20" height="20"><path d="M768 554.666667H256c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z" p-id="8187" fill="#000000"></path></svg>
                                    </div>
                                    <div className="count">{item.count}</div>
                                    <div className="add" onClick={addcount.bind(null, index)}><svg t="1642776434470" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9695" width="20" height="20"><path d="M512 119.87809245c10.23870874 0 18.96459937 3.60900903 26.22216797 10.81713891 7.23284888 7.20812988 10.87152099 15.96862769 10.87152099 26.2666626v296.5715332h296.59130884c10.26342773 0 18.99426246 3.70788575 26.21722388 10.91601563 7.2822876 7.21307397 10.88635254 15.96862769 10.88635254 26.16778516 0 10.29803491-3.60900903 18.94976782-10.88635254 26.2666626-7.21801734 7.20812988-15.95379615 10.81713891-26.21722388 10.81713891H549.09368896v296.67040992c0 10.30297828-3.63867211 18.95471191-10.87152099 26.1628418C530.96459937 857.85117594 522.23870874 861.45524089 512 861.45524089s-18.95471191-3.60900903-26.22216797-10.92095971c-7.23284888-7.20812988-10.87152099-15.85986352-10.87152099-26.1628418V527.70102946H178.3150022c-10.24859619 0-18.984375-3.60900903-26.20239233-10.81713891C144.83032227 509.5669965 141.21142578 500.91526286 141.21142578 490.61722795c0-10.19915748 3.62384057-18.95471191 10.89624-26.16778516 7.21801734-7.20812988 15.95874023-10.91601563 26.20239305-10.91601563h296.59625221V156.95694987c0-10.30297828 3.63867211-19.05853271 10.87152099-26.2666626C493.04528809 123.4821574 501.76129126 119.87809245 512 119.87809245" p-id="9696" fill="#000000"></path></svg></div>
                                </div>
                            </div>
                        </div>
                    )
                }
            </div>
            
            {/* 结算 */}
            <div className="sum">
                {/* 全选 */}
                <div className="svg" onClick={allSelect} >
                    <div style={isAllSelect ? { display: 'none' } : {}}>
                        <svg t="1642750103398" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7289" width="25" height="25"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128c-211.744443 0-384 172.255557-384 384s172.255557 384 384 384 384-172.255557 384-384S723.744443 128 512 128z" p-id="7290" fill="#d4d4d4"></path></svg>
                    </div>
                    <div style={isAllSelect ? {} : { display: 'none' }}>
                        <svg t="1642789229494" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12167" width="25" height="25"><path d="M512 65.983389c-245.919634 0-446.016611 200.095256-446.016611 446.016611 0 245.952318 200.064292 446.016611 446.016611 446.016611S958.016611 757.952318 958.016611 512C958.016611 266.080366 757.952318 65.983389 512 65.983389zM727.231286 438.432254 471.00766 697.439161c-0.063647 0.063647-0.192662 0.096331-0.25631 0.192662-0.096331 0.063647-0.096331 0.192662-0.192662 0.25631-2.048757 1.983389-4.575729 3.19957-6.944443 4.544765-1.183497 0.672598-2.143368 1.696116-3.392232 2.176052-3.839484 1.536138-7.904314 2.33603-11.967424 2.33603-4.095794 0-8.224271-0.799892-12.096439-2.399677-1.279828-0.543583-2.303346-1.632469-3.519527-2.303346-2.368714-1.343475-4.832039-2.528692-6.880796-4.544765-0.063647-0.063647-0.096331-0.192662-0.159978-0.25631-0.063647-0.096331-0.192662-0.096331-0.25631-0.192662l-126.016611-129.503454c-12.320065-12.672705-12.032791-32.928047 0.639914-45.248112 12.672705-12.287381 32.895364-12.063755 45.248112 0.639914l103.26354 106.112189 233.279613-235.839269c12.416396-12.576374 32.704421-12.703669 45.248112-0.25631C739.520387 405.600538 739.647682 425.85588 727.231286 438.432254z" p-id="12168" fill="#ff5500"></path></svg>
                    </div>
                </div>
                <div className="all-select">全选</div>
                <div className="" style={isDeleteState ? { display: "none" } : {}}>
                    <div className="total-price">总价:{totalPrice()}</div>
                    <div className="settlement">结算</div>
                </div>
                <div className="" style={isDeleteState ? {} : { display: "none" }}>
                    <div className="delete-button" onClick={deleteGoods}>删除</div>
                </div>
            </div>
        </>
    )
}

const mapStateToprops = (state) => {
    // console.log(state,'state');
    return {
        goods: state.shopping.goods,
        isAllSelect: state.shopping.isAllSelect,
        isDeleteState: state.shopping.isDeleteState
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        // 是否选中
        changeSelect(index) {
            dispatch(actionTypes.setSelect(index))
        },
        // 全部选中
        allSelect() {
            dispatch(actionTypes.setAllSelect())
        },
        // 删除商品
        deleteGoods() {
            dispatch(actionTypes.setDelectGoods())
        },
        // 加数量
        addcount(index) {
            dispatch(actionTypes.setAddCount(index))
        },
        // 减数量
        subcount(index) {
            dispatch(actionTypes.setSubCount(index))
        },
        // 是否处于删除状态
        setDeleteState() {
            dispatch(actionTypes.deleteState())
        }
    }
}

export default connect(mapStateToprops, mapStateToDispatch)(memo(Shopping))